<template>
  <div ref="bar" class="bar"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "barChart",
  data() {
    return {
      my: "",
    };
  },
  props: ["tab"],
  mounted() {
    var myChart = echarts.init(this.$refs.bar);
    this.my = myChart.setOption({
      title: {
        text: "销售量趋势",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "60%",
          data: [10, 52, 200, 334, 390, 330, 220, 500, 450, 480, 380, 420],
        },
      ],
    });
    this.my = myChart;
  },
  watch: {
    tab(nval, oval) {
      if (nval == "visit") {
        this.my.setOption({
          title: {
            text: "访问量趋势",
          },
          series: [
            {
              name: "Direct",
              type: "bar",
              barWidth: "60%",
              data: [330, 220, 500, 450, 480, 380, 420, 10, 52, 200, 334, 390],
            },
          ],
        });
      } else {
        this.my.setOption({
          title: {
            text: "销售量趋势",
          },
          series: [
            {
              name: "Direct",
              type: "bar",
              barWidth: "60%",
              data: [10, 52, 200, 334, 390, 330, 220, 500, 450, 480, 380, 420],
            },
          ],
        });
      }
    },
  },
};
</script>

<style>
.bar {
  width: 100%;
  height: 400px;
}
</style>